<template>
  <Row>
    <i-col span="16">
      <Row
        v-for="i in (customIconList.length / 3)"
        :key="`custom-icon-row-${i}`"
      >
        <i-col
          span="8"
          v-for="item in customIconList.slice((i - 1) * 3, i * 3)"
          :key="`custom-icon-${item}`"
        >
          <Card style="margin: 0 5px 5px; text-align: center;">
            <icons
              :size="30"
              :type="item"
            />
            <p class="icon-code">&lt;Icons :size="30" type="{{ item }}"&gt;</p>
            <p>&lt;CommonIcon :size="30" type="_{{ item }}"&gt;</p>
          </Card>
        </i-col>
      </Row>
      <Row>
        <i-col>
          <Card style="margin: 0 5px 5px; text-align: center;">
            <common-icon
              :size="30"
              type="ionic"
            />
            <p class="icon-code">view-design内置图标</p>
            <p>&lt;CommonIcon :size="30" type="ionic"&gt;</p>
          </Card>
        </i-col>
      </Row>
    </i-col>
    <i-col span="8">
      <Card>
        <p class="intro-p">
          <Icon
            style="margin-right: 10px;"
            :size="10"
            type="heart"
          />Icons组件支持自定义图标的显示，具体自定义图标字体文件的制作请参考文档。</p>
        <p class="intro-p">
          <Icon
            style="margin-right: 10px;"
            :size="10"
            type="heart"
          />CommonIcon组件同时支持view-design内置图标类型和自定义图标类型，为了区别这两种类型，需要在自定义图标名称前加下划线"_"</p>
      </Card>
    </i-col>
  </Row>
</template>

<script>
import Icons from "_c/icons";
import CommonIcon from "_c/common-icon";
export default {
  name: "icons_pages",
  components: {
    Icons,
    CommonIcon
  },
  data() {
    return {
      customIconList: ["woman", "man", "smile", "meh", "frown", "bear"]
    };
  }
};
</script>

<style lang="less">
.icon-code {
  margin: 20px 0 10px;
}
.intro-p {
  margin-bottom: 10px;
}
</style>
